/**
 * 费用查询
 * @author truexin
 * @date   2016/08/04
 */
import PullRefresh from '../components/mui/PullRefresh.js';

const lf = liefeng,
    R = React,
    RC = React.createClass,
    getUrlParam = lf.utils.getUrlParam,
    ajax = lf.utils.ajax;

const TYPE = '未交',
    GREY = 'grey-color', //黑体字
    TEXT = 'textColor'; // 蓝色字体

let cashList = [
    {
        total: '',
        text: '预缴款余额',
        type: '已交'
    },
    {
        total: '',
        text: '未缴金额合计',
        type: '未交'
    }

];
let feeType = {
    //"feeType": "string,费用类型。
    // 1：水费(含污水/垃圾处理费)；2：电费；3：燃气费；4：物业管理费；5：维修基金；6：车位管理费；
    // 7：排污费；8：垃圾费；21：公摊水费；22：公摊电费；23：公摊燃气费",
    1: '水费(含污水/垃圾处理费)',
    2: '电费',
    3: '燃气费',
    4: '物业管理费',
    5: '维修基金',
    6: '车位管理费',
    7: '排污费',
    8: '垃圾费',
    21: '公摊水费',
    22: '公摊电费',
    23: '公摊燃气费',
}

const Title = RC({
    getInitialState() {
        return ({
            projectName: ''
        })
    },
    componentWillMount() {
        let user = this.props.user,
            me = this;
        ajax({
            data: {
                globalId: user.globalId,
            },
            success: function (data) {
                $.each(data.dataList, function () {
                    if (this.projectId == user.projectId)
                        me.setState({
                            projectName: this.projectName
                        });
                })

            }
        }, lf.finger.api.household.getHouseList)
    },
    render() {
        return (
            <div className="title">
                <div className="split-line"></div>
                <p className="houseNum">
                    <span >房号 : </span>
                    <span className={GREY}>{this.state.projectName + ' ' + this.props.houseNum}</span>
                </p>
            </div>
        );
    }
});

const TwoBtn = RC({
    render() {
        let item2DArray = lf.utils.to2DArray(this.props.cashList || [], 2);
        
        let menus = item2DArray.map((array, i) => {
            return (
                <div key={'array' + i} className="flex">
                    {
                        array.map(menu => {
                            return <div className={"item list " + (menu.type == TYPE ? TEXT : GREY)}
                                        ref="list">
                                <p className='cash-type '>{menu.text}</p>
                                <p className='normal cash '>{menu.total ? ('￥' + menu.total) : '0'}</p>
                            </div>
                        })
                    }
                </div>
            );
        });
        
        return (
            <div className="menu-btn">
                {menus}
            </div>
        );
    }
});

const Panel = RC({
    tapFn() {
        let $panel = $('.panel');

        $panel.on('tap', function () {
            
            let $me = $(this);
            
            if ($me.siblings().hasClass('showList')) {
                $me.siblings().hide();
                $me.siblings().removeClass('showList');
            } else {
                $me.siblings().show();
                $me.siblings().addClass('showList');
            }
            $me.parent().siblings().find('.history-record').hide();
            
        })
    },
    componentWillUpdate() {
        this.tapFn();
    },
    componentDidUpdate() {
        this.tapFn();
    },
    render() {
        let me = this,
            year = new Date().getFullYear();
        
        let panelList = this.props.cashMonthList.map(function (list) {
            return <div>
                <div className="panel flex">
                    <div className="flex-item">
                        <p className={"decoration " + (list.type == TYPE && list.amountNo != null ? 'bgBlue' : 'bgGray')}>
                            {list.type}
                        </p>
                        <span className="month-position">{list.yearofmonth.slice(4)}</span>
                        <span className="slant-line"></span>
                        <span className="year-position">{year}</span>
                    </div>
                    <div className={"flex-item " + (list.type == TYPE ? GREY : '')}>
                        <p>{list.sumText}</p>
                        <span className='cash'>{list.amountTotal == 0 ? '0' : ('￥' + list.amountTotal)}</span>
                    </div>
                    <div className="flex-item ">
                        <p className={list.type == TYPE ? GREY : ''}>{list.notText}</p>
                        <span className={"cash " + (list.type == TYPE ? TEXT : '')}>
                            {list.amountNo == 0 || list.amountNo == null ? '0' : ('￥' + list.amountNo)}
                        </span>
                    </div>
                </div>
                <HistoryList user={me.props.user} houseNum={me.props.houseNum} yearofmonth={list.yearofmonth}/>
            </div>
        })
        return <div>
            {panelList}
        </div>
    }
});

const HistoryList = RC({
    getInitialState() {
        return ({
            historyList: [],
        })
    },
    getItemList(user, houseNum, yearofmonth) {

        let me = this;
        ajax({
            type: 'post',
            data: {
                projectId: user.projectId,
                houseNum: houseNum,
                yearofmonth: yearofmonth,
            },
            success: function (data) {
                let dataList = data.dataList;
                me.setState({
                    historyList: dataList
                });
            }
        }, lf.finger.api.fee.getItemList);

    },
    componentWillMount() {
        this.getItemList(this.props.user, this.props.houseNum, this.props.yearofmonth);
    },
    render() {
        let list = this.state.historyList.map(function (list) {
            return <div className="mui-table-view-cell flex">
                <p className="flex-item">
                    {feeType[list.feeType]}
                </p>
                <p className="flex-item">{list.totalFee == 0 ? '0' : ('￥' + list.totalFee)}</p>
                <p className={"flex-item " + (list.status == 0  ? TEXT : '' )}>
                    {list.status == 0 ? '未缴' : '已缴'}
                </p>
            </div>
        })
        return <div className="history-record">
            <div className="mui-table-view-cell flex history-title">
                <p className="flex-item">收费项目</p>
                <p className="flex-item">本期金额</p>
                <p className="flex-item">缴费状态</p>
            </div>
            {list}
        </div>
    }
});

const Root = RC({
    getInitialState() {
        return ({
            houseNum: '',
            cashList: [],
            cashMonthList: [],
            historyList: [],
        })
    },
    componentWillMount() {
        let user = this.props.user;
        this.getHouseNum(user);
    },
    getHouseNum(user) {
        let me = this;
        ajax({
            type: 'get',
            data: {
                houseId: user.houseId,
            },
            success: function (data) {
                me.setState({
                    houseNum: data.data.houseNum
                });
                me.getCashList(user, me.state.houseNum);
                me.getCashMonthList(user, me.state.houseNum);
            }
        }, lf.finger.api.household.getHouseInfo);
        
    },
    getCashList(user, houseNum) {
        let me = this;
        ajax({
            type: 'post',
            data: {
                projectId: user.projectId,
                houseNum: houseNum,
            },
            success: function (data) {
                if (data.data) {
                    cashList[0].total = data.data.balance; //预缴款余额
                    cashList[1].total = data.data.notPayMoney; //未缴款金额合计
                }

                me.setState({
                    cashList: cashList
                });
            }
        }, lf.finger.api.fee.getTotalFee);
    },
    getCashMonthList(user, houseNum) {
        let me = this;
        ajax({
            type: 'post',
            data: {
                projectId: user.projectId,
                houseNum: houseNum,
            },
            success: function (data) {
                let dataList = data.dataList;
                
                $.each(dataList, function () {
                    this.notText = '本期未缴金额';
                    this.sumText = '本期费用合计';
                    this.type = this.amountNo == null ? '已交' : '未交';
                })
                
                me.setState({
                    cashMonthList: dataList
                });

            }
        }, lf.finger.api.fee.getSumList);
    },

    render() {
        return <div className="property-fee query">
            <Title user={this.props.user} houseNum={this.state.houseNum}/>
            <TwoBtn user={this.props.user} cashList={this.state.cashList}/>
            <Panel user={this.props.user} cashMonthList={this.state.cashMonthList} houseNum={this.state.houseNum}/>
        </div>
    }
});

lf.appJs.getUser(function (user) {

    let feeNoticeDetailId = getUrlParam('feeNoticeDetailId');

    if (feeNoticeDetailId) {
        ajax({
            type: 'post',
            data: {
                feeNoticeDetailId: feeNoticeDetailId,
            },
            success: function (data) {
                if (data.code == 200)
                    console.log('you are browsing successfully!');
            }
        }, lf.finger.api.fee.browser);
    }
    R.render(<PullRefresh data={<Root user={user}/>}/>,
        document.getElementById('root'), function () {
            $('.mui-scroll').css({
                backgroundColor: '#efeff4'
            })
        });
});